<template>
  <span>
    <i class="iconfont icon-star"
       v-for="(item, index) of stars"
       :key="index"
       :class="item"
    ></i>
  </span>
</template>

<script>
export default {
  name: 'Star',
  props: {
    score: String | Number
  },
  data () {
    return {
      length: 5
    }
  },
  computed: {
    stars () {
      let star = []
      let num = this.score
      let len = this.length
      let intNum = Math.floor(num)
      let floatNum = num - intNum
      for (let i = 0; i < intNum; i++) {
        star.push('icon-full-star')
      }
      for (let j = intNum; j < len; j++) {
        if (j === intNum) {
          if (floatNum === 0) {
            star.push('icon-empty-star')
          } else {
            star.push('icon-half-star')
          }
        } else {
          star.push('icon-empty-star')
        }
      }
      return star
    }
  }
}
</script>

<style lang='scss' scoped>
  span {
    font-size: 0;
  }
  i.icon-star {
    font-size: 24px;
    color: #ff9a0d;
  }
</style>
